<template>
  <div >
    <div class="page_404">
        <img class="img_404" :src="img404" alt="" srcset="">
        <p class="text_404">您访问的页面不存在，请确认你访问的页面是否正确？！</p>
        <div class="btns_404">
          <!-- <el-button type="text" @click="goBackPage()">返回上一页</el-button> -->
        </div>
      </div>
      <div>
        <div class="page_iphone">
            <img class="img_404" :src="logo_word" alt="" srcset="">
            <p class="text_iphone">此网址限制手机访问，请使用电脑浏览器登录！</p>
            <div class="btns_404">
          <!-- <el-button type="text" @click="goBackPage()">返回上一页</el-button> -->
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import img404 from '@/assets/images/404_images/404.png';
import logo_word from '@/assets/images/logo/logo_word.png';
export default {
  data () {
    return {
      img404,
      logo_word
    };
  },
  methods: {
    goBackPage () {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.page_404 {
  box-sizing: border-box;
  display: flex;
  padding-top: 180px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.img_404 {
  width: 240px;
}
.text_404 {
  margin: 0;
  padding-top: 52px;
  font-size: 18px;
  color: #6A6A6A;
}
.text_iphone {
  margin: 0;
  font-size: 18px;
  color: #6A6A6A;
}
.btns_404 {
  padding-top: 20px;
}
.page_iphone {
    display: none;
  }
@media (max-width: 500px) {
  .page_404 {
    display: none;
  }
  .page_iphone {
    display: block;
    box-sizing: border-box;
    display: flex;
    padding-top: 104px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
